<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: blue;
            display: block;
            font-family: cursive;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas')
        var ctx = canvas.getContext('2d')  
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        ctx.beginPath() 
        ctx.moveTo(100, 100)
        ctx.lineTo(200, 200)
        ctx.strokeStyle = 'black'
        ctx.stroke()
        ctx.closePath() 

        //画空心矩形
        ctx.beginPath() //落笔
        ctx.strokeStyle = 'blue'
        ctx.strokeRect(80, 80, 100, 200)  // x y width height
        ctx.closePath() //提笔
        //画实心矩形
        ctx.beginPath() //落笔
        ctx.fillStyle = 'yellow'
        ctx.fillRect(500, 100, 100, 200)
        ctx.closePath() //提笔
        //画空心弧度
        ctx.beginPath() //落笔
        ctx.arc(300, 300, 100, 0, (Math.PI*2)/3)  //x y 半径 起始角度 终止角度
        ctx.strokeStyle = 'orange'
        ctx.stroke()
        ctx.closePath() //提笔
        //画实心弧度
        ctx.beginPath() //落笔
        ctx.arc(600, 300, 100, 0, Math.PI)  //x y 半径 起始角度 终止角度
        ctx.strokeStyle = 'pink'
        ctx.stroke()
        ctx.closePath() //提笔

        //画空心文字
        ctx.beginPath()
        ctx.font = '60px cursive'
        ctx.strokeStyle = 'green'
        ctx.strokeText('泽骏', 600, 600)  //内容  x   y
        ctx.closePath()

        //画实心文字
        ctx.beginPath()
        ctx.font = '60px cursive'
        ctx.fillStyle = 'green'
        ctx.fillText('泽骏', 400, 600)  //内容  x   y
        ctx.closePath()    
    </script>
</body>
</html>